<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    模板引用：
      概念：使用 ref 属性给元素或组件做一个标记，后续通过该标记可以获取到一些东西


      获取的东西是什么？
          1. 标记的如果是普通元素，后续获取到的是该元素的 DOM 对象
          2. 标记的如果是组件，后续获取到的是该组件的 实例 对象

      如果获取？
          通过 this.$refs 实例属性来获取

      限制:
          要获取的话，必须等到组件挂载完成之后才能获取得到

   -->

    <div id="app">
      <p :ref="(el) => { pEl = el }">我的天</p>
      <hr />
      <input ref="box" type="text" />

      <ul>
        <li v-for="item in 10" ref="li">{{ item }}</li>
      </ul>

      <button ref="button" @click="handleLogin">登录</button>
    </div>

    <script src="../lib/vue3.js"></script>
    <script>
      Vue.createApp({
        data() {
          return {
            pEl: null,
          };
        },

        created() {
          console.log("=== created");
          console.log(this.$refs.box); // undefined
        },

        mounted() {
          console.log("=== mounted");
          console.log(this.$refs.box); // <input />
        },

        methods: {
          handleLogin() {
            // const value = document.querySelector("#box").value;
            // console.log("value", value);

            // console.log("this.$refs", this.$refs);
            const value = this.$refs.box.value;
            console.log("value", value);

            console.log(this.$refs.li);

            console.log("pEl", this.pEl);
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
